<template>
  <!-- <div class="process-panel__container" :style="{ width: `${this.width}px`}">
    <el-collapse v-model="activeTab">
      <el-collapse-item name="base">
        <div slot="title" class="panel-tab__title"><i class="el-icon-info"></i>常规</div>
        <element-base-info :id-edit-disabled="idEditDisabled" :business-object="elementBusinessObject" :type="elementType" />
      </el-collapse-item>
      <el-collapse-item name="condition" v-if="elementType === 'Process'" key="message">
        <div slot="title" class="panel-tab__title"><i class="el-icon-s-comment"></i>消息与信号</div>
        <signal-and-massage />
      </el-collapse-item>
      <el-collapse-item name="condition" v-if="conditionFormVisible" key="condition">
        <div slot="title" class="panel-tab__title"><i class="el-icon-s-promotion"></i>流转条件</div>
        <flow-condition :business-object="elementBusinessObject" :type="elementType" />
      </el-collapse-item>
      <el-collapse-item name="task" v-if="elementType.indexOf('Task') !== -1" key="task">
        <div slot="title" class="panel-tab__title"><i class="el-icon-s-claim"></i>任务</div>
        <element-task :id="elementId" :type="elementType"  />
      </el-collapse-item>
      <el-collapse-item name="multiInstance" v-if="elementType.indexOf('Task') !== -1" key="multiInstance">
        <div slot="title" class="panel-tab__title"><i class="el-icon-s-help"></i>多实例</div>
        <element-multi-instance :business-object="elementBusinessObject" :type="elementType" />
      </el-collapse-item>
      <el-collapse-item name="listeners" key="listeners">
        <div slot="title" class="panel-tab__title"><i class="el-icon-message-solid"></i>执行监听器</div>
        <element-listeners :id="elementId" :type="elementType" />
      </el-collapse-item>
      <el-collapse-item name="taskListeners" v-if="elementType === 'UserTask'" key="taskListeners">
        <div slot="title" class="panel-tab__title"><i class="el-icon-message-solid"></i>任务监听器</div>
        <user-task-listeners :id="elementId" :type="elementType" />
      </el-collapse-item>
      <el-collapse-item name="extensions" key="extensions">
        <div slot="title" class="panel-tab__title"><i class="el-icon-circle-plus"></i>扩展属性</div>
        <element-properties :id="elementId" :type="elementType" />
      </el-collapse-item>
      <el-collapse-item name="other" key="other">
        <div slot="title" class="panel-tab__title"><i class="el-icon-s-promotion"></i>其他</div>
        <element-other-config :id="elementId" />
      </el-collapse-item>
    </el-collapse>
  </div> -->
</template>
<script>
// import ElementBaseInfo from "./base/ElementBaseInfo";
// import ElementOtherConfig from "./other/ElementOtherConfig";
// import ElementTask from "./task/ElementTask";
// import ElementMultiInstance from "./multi-instance/ElementMultiInstance";
// import FlowCondition from "./flow-condition/FlowCondition";
// import SignalAndMassage from "./signal-message/SignalAndMessage";
// import ElementListeners from "./listeners/ElementListeners";
// import ElementProperties from "./properties/ElementProperties";
// import UserTaskListeners from "./listeners/UserTaskListeners";
// /**
//  * 侧边栏  ElementForm,
//  */
// export default {
//   name: "MyPropertiesPanel",
//   components: {
//     UserTaskListeners,
//     ElementProperties,
//     ElementListeners,
//     SignalAndMassage,
//     FlowCondition,
//     ElementMultiInstance,
//     ElementTask,
//     ElementOtherConfig,
//     ElementBaseInfo
//   },
//   componentName: "MyPropertiesPanel",
//   props: {
//     bpmnModeler: Object,
//     prefix: {
//       type: String,
//       default: "activiti"
//     },
//     width: {
//       type: Number,
//       default: 480
//     },
//     idEditDisabled: {
//       type: Boolean,
//       default: false
//     }
//   },
//   provide() {
//     return {
//       prefix: this.prefix,
//       width: this.width
//     };
//   },
//   data() {
//     return {
//       activeTab: "base",
//       elementId: "",
//       elementType: "",
//       userTaskList:[],
//       elementBusinessObject: {}, // 元素 businessObject 镜像，提供给需要做判断的组件使用
//       conditionFormVisible: false, // 流转条件设置
//       formVisible: false // 表单配置
//     };
//   },
//   watch: {
//     elementId: {
//       handler() {
//         this.activeTab = "base";
//       }
//     }
//   },
//   created() {
//     this.initModels();
//   },
//   methods: {
//     initModels() {
//       // 初始化 modeler 以及其他 moddle
//       if (!this.bpmnModeler) {
//         // 避免加载时 流程图 并未加载完成
//         this.timer = setTimeout(() => this.initModels(), 10);
//         return;
//       }
//       if (this.timer) clearTimeout(this.timer);
//       window.bpmnInstances = {
//         modeler: this.bpmnModeler,
//         modeling: this.bpmnModeler.get("modeling"),
//         moddle: this.bpmnModeler.get("moddle"),
//         eventBus: this.bpmnModeler.get("eventBus"),
//         bpmnFactory: this.bpmnModeler.get("bpmnFactory"),
//         elementFactory: this.bpmnModeler.get("elementFactory"),
//         elementRegistry: this.bpmnModeler.get("elementRegistry"),
//         replace: this.bpmnModeler.get("replace"),
//         selection: this.bpmnModeler.get("selection")
//       };
//       this.getActiveElement();
//     },
//     getActiveElement() {
//       // 初始第一个选中元素 bpmn:Process
//       this.initFormOnChanged(null);
//       this.bpmnModeler.on("import.done", e => {
//         this.initFormOnChanged(null);
//       });
//       // 监听选择事件，修改当前激活的元素以及表单
//       this.bpmnModeler.on("selection.changed", ({ newSelection }) => {
//         this.initFormOnChanged(newSelection[0] || null);
//       });
//       this.bpmnModeler.on("element.changed", ({ element }) => {
//         // 保证 修改 "默认流转路径" 类似需要修改多个元素的事件发生的时候，更新表单的元素与原选中元素不一致。
//         if (element && element.id === this.elementId) {
//           this.initFormOnChanged(element);
//         }
//       });
//     },
//     // 初始化数据
//     initFormOnChanged(element) {
//       let activatedElement = element;
//       if (!activatedElement) {
//         activatedElement =
//           window.bpmnInstances.elementRegistry.find(el => el.type === "bpmn:Process") ??
//           window.bpmnInstances.elementRegistry.find(el => el.type === "bpmn:Collaboration");
//       }
//       if (!activatedElement) return;
//       //Log.printBack(`select element changed: id: ${activatedElement.id} , type: ${activatedElement.businessObject.$type}`);
//       //Log.prettyInfo("businessObject", activatedElement.businessObject);
//       window.bpmnInstances.bpmnElement = activatedElement;
//       //传递参数
//       this.bpmnElement = activatedElement;
//       this.elementId = activatedElement.id;
//       this.elementType = activatedElement.type.split(":")[1] || "";
//       this.elementBusinessObject = JSON.parse(JSON.stringify(activatedElement.businessObject));
//       this.conditionFormVisible = !!(
//         this.elementType === "SequenceFlow" &&
//         activatedElement.source &&
//         activatedElement.source.type.indexOf("StartEvent") === -1
//       );
//       if(this.elementType==="Process" ||this.elementType === "UserTask"){
//         this.dialogVisible=true;
//       }
//       //this.formVisible = this.elementType === "UserTask" || this.elementType === "StartEvent";
//     },
//     beforeDestroy() {
//       window.bpmnInstances = null;
//     }
//   }
// };
</script>
